import React from 'react'
import { Icon, Card, Modal, Table } from 'antd'
import CountUp from 'react-countup'
import styles from './DistributorCard.less'

function DistributorCard({
  financialAccountId,
  name,
  dispatch,
  balance,
  showUrlModal,
  showDistributorModal,
  businessMalls,
  city,
  province,
  district,
  address,
  code,
  id
}) {
  const { Meta } = Card;
  const disInfo = {
    storeCode: code,
    businessMalls: businessMalls,
    city: city,
    province: province,
    district: district,
    address: address,
    id: id
  }
  const doNull = () => { }
  const buildActions = _.isEmpty(code) || businessMalls.length === 0 ? [
    <span style={{ marginTop: 10 }} onClick={() => showDistributorModal(true, disInfo)}>修改门店地址</span>
  ] : [<span style={{ marginTop: 10 }} onClick={() => showUrlModal(true, disInfo)}>查看商城链接</span>, <span style={{ marginTop: 10 }} onClick={() => showDistributorModal(true, disInfo)}>修改门店地址</span>]
  return (
    <Card
      style={{ marginBottom: 24 }}
      hoverable={true}
      actions={buildActions}
    >
      <Meta
        avatar={<Icon style={{ fontSize: 60, color: '#33bdb8' }} className={styles.iconWarp} type={'shop'} />}
        title={name || '无'}
        description={
          <a onClick={() => {
            balance === '****' ? doNull() : dispatch({ type: 'dashboard/direct', payload: financialAccountId })
          }} style={{ color: 'red', fontSize: 25 }}>
            <span>￥</span>
            <span
            // start={0}
            // end={balance}
            // duration={2.75}
            // useEasing
            // useGrouping
            // separator="" >
            >
              {balance}
            </span>
          </a>
        }
      />
    </Card>
  )
}

export default DistributorCard
